<template>
	<div class="appEdit">
		<el-dialog :title="(state.formData.id === 0 ? '添加' : '修改') + 'APP版本'" v-model="state.isShowDialog" width="600px">
			<el-form ref="formRef" :model="state.formData" :rules="state.rules" size="default" label-width="120">
				<el-form-item label="APP名称" prop="appName">
					<el-input v-model="state.formData.appName" placeholder="APP名称" clearable></el-input>
				</el-form-item>

				<el-form-item label="APP包名" prop="packageName">
					<el-input v-model="state.formData.packageName" placeholder="APP包名" clearable></el-input>
				</el-form-item>

				<el-form-item label="版本名称" prop="versionName">
					<el-input v-model="state.formData.versionName" placeholder="版本名称" clearable></el-input>
				</el-form-item>

				<el-form-item label="版本号" prop="versionCode">
					<el-input type="number" v-model="state.formData.versionCode" placeholder="版本号（构建编号）" clearable></el-input>
				</el-form-item>

				<el-form-item label="状态" prop="versionCode">
					<el-radio-group v-model="state.formData.isEnable">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">禁用</el-radio>
					</el-radio-group>
				</el-form-item>

				<!-- <el-form-item label="平台" prop="platform">
					<el-input disabled v-model="state.formData.platform" controls-position="right" placeholder="平台" />
				</el-form-item> -->

				<el-form-item label="下载地址" prop="downloadUrl">
					<el-input v-model="state.formData.downloadUrl" placeholder="新版本下载地址" />
				</el-form-item>

				<el-form-item label="更新日志" prop="updateLog">
					<el-input v-model="state.formData.updateLog" type="textarea" :rows="4" placeholder="更新内容" maxlength="255" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default" :loading="state.loading">{{
						state.formData.id === 0 ? '新 增' : '修 改'
					}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="appEdit">
import { reactive, toRefs, ref, getCurrentInstance, unref, defineProps, defineExpose } from 'vue';
import { add, update } from '/@/api/hm/app';
import { ElMessage } from 'element-plus';

const props = defineProps({
	editType: {
		type: String,
		default: 'edit',
	},
});

const emit = defineEmits(['success']);

const formRef = ref<HTMLElement | null>(null);
const state = reactive({
	loading: false,
	isShowDialog: false,

	formData: {
		id: 0,
		appName: '智眼',
		packageName: 'com.example.smart_eyes',
		versionName: '',
		versionCode: '',
		platform: 'android',
		updateLog: '',
		downloadUrl: '',
		isEnable:1,
	},

	// 表单校验
	rules: {
		appName: [{ required: true, message: 'appName不能为空', trigger: 'blur' }],
		packageName: [{ required: true, message: '应用包名不能为空', trigger: 'blur' }],
		versionName: [{ required: true, message: '版本名不能为空', trigger: 'blur' }],
		versionCode: [{ required: true, message: '版本号（构建编号）不能为空', trigger: 'blur' }],
		// platform: [{ required: true, message: '平台不能为空', trigger: 'blur' }],
		updateLog: [{ required: true, message: '更新日志不能为空', trigger: 'blur' }],
		downloadUrl: [{ required: true, message: '下载地址不能为空', trigger: 'blur' }],
	},
});

// 打开弹窗
const openDialog = (row?: any) => {
	resetForm();
	if (row) {
		state.formData = row;
	}
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 新增
const onSubmit = () => {
	const formWrap = unref(formRef) as any;
	if (!formWrap) return;

	formWrap.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;

			if (state.formData.id === 0) {
				//添加
				add(state.formData)
					.then(() => {
						ElMessage.success('新版本添加成功');
						closeDialog(); // 关闭弹窗
						emit('success');
					})
					.finally(() => {
						state.loading = false;
					});
			} else {
				//修改
				update(state.formData)
					.then(() => {
						ElMessage.success('版本修改成功');
						closeDialog(); // 关闭弹窗
						emit('success');
					})
					.finally(() => {
						state.loading = false;
					});
			}
		}
	});
};

const resetForm = () => {
	state.formData = {
		id: 0,
		appName: '智眼',
		packageName: 'com.example.smart_eyes',
		versionName: '',
		versionCode: '',
		platform: 'android',
		updateLog: '',
		downloadUrl: '',
		isEnable:1,
	};
};

defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss"></style>
